<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>learnjQuery</title>
    <script src="jquery.js"></script>
    <style>
        .green {
            color: green;
        }

        .red {
            color: red;
        }
    </style>
</head>

<body>
    <div class="box">luojianming</div>
    <p>hello world!</p>
    <span>￥999</span>
    <ul class="list">
        <li>1</li>
        <li>2</li>
        <p>666</p>
        <li>3</li>
    </ul>
    <input type="text">
    <script>

        // DOM元素加载完成后执行
        // $(document).ready(function () {
        //     console.log(1);
        // })
        // 简写方法
        $(function () {
            console.log($('.box').attr('class'));
            $('.box').attr('class', 'box name')
            console.log($('.box').css('color', 'red'));
            console.log($('.box').length);
            console.log($('.box').get(0));
            console.log($('.box')[0]);
            console.log($('.box').html());
            console.log($('.box').text());
            console.log($('.box').html('luo666'));
            // 群组选择器
            $('.box,p,span').css('font-size', '20px').css('background-color', 'orange');
            // 通配选择器
            // $('*').css('margin', '0');
            // 所选元素之前的同级元素
            // console.log($('.list p').prevAll().css('color', 'green'));
            // 所选元素之后的同级元素
            // $('.list p').next().css('color', 'green')
            // $('.list p').siblings('li').css('color', 'yellow');
            // $('.list').find('p').siblings('li').css('color', 'yellow');
            // $('.list').prevUntil('div').css('color', 'green');
            console.log($('input').val(11111));

            $('p').click(function () {
                $(this).toggleClass('green');
            })
        });
    </script>
</body>

</html>